<template>
    <el-dialog ref="dialogform" :title="addEditName + title" :visible.sync="dialogVisible" width="40%"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <div v-if="addEditFlag == 'add' || addEditFlag == 'edit'">
                <el-form-item label="工单标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请输入工单标题"></el-input>
                </el-form-item>
                <!-- <el-form-item label="工单编号" prop="orderCode">
                <el-input v-model="ruleForm.orderCode" placeholder="请输入工单编号"></el-input>
            </el-form-item> -->
                <el-form-item label="工单内容" prop="content">
                    <el-input type="textarea" v-model="ruleForm.content" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item label="提交人" prop="submitUserId">
                    <el-select v-model="ruleForm.submitUserId" class="w100p" placeholder="请选择提交人">
                        <el-option v-for="item, index in userList" :key="index" :label="item.realName"
                            :value="item.userId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="提交时间" prop="submitTime">
                    <el-date-picker class="w100p" v-model="ruleForm.submitTime" value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div v-else>
                <el-form-item label="工单标题:">
                    <span>{{ ruleForm.title }}</span>
                </el-form-item>
                <el-form-item label="工单编号:">
                    <span>{{ ruleForm.orderCode }}</span>
                </el-form-item>
                <el-form-item label="工单内容:">
                    <span>{{ ruleForm.content }}</span>
                </el-form-item>
                <el-form-item label="提交人:">
                    <span>{{ ruleForm.submitUser ? ruleForm.submitUser.realName : '--' }}</span>
                </el-form-item>
                <el-form-item label="提交时间:">
                    <span>{{ ruleForm.submitTime }}</span>
                </el-form-item>
                <el-form-item label="审核状态:" v-if="this.addEditFlag == 'lookView'">
                    <span v-show="ruleForm.workOrderStatus == 'PENDINGAPPROVAL'">待审核</span>
                    <span v-show="ruleForm.workOrderStatus == 'REJECT'">驳回</span>
                    <span v-show="ruleForm.workOrderStatus == 'PASS'">已通过</span>
                </el-form-item>
                <el-form-item label="备注:" v-if="this.addEditFlag == 'lookView'">
                    <span>{{ ruleForm.remark || '无备注' }}</span>
                </el-form-item>
                <el-form-item v-if="this.addEditFlag == 'examine'&&dialogVisible" label="审核状态" prop="workOrderStatus">
                    <el-select v-model="ruleForm.workOrderStatus" class="w100p" placeholder="请选择审核状态">
                        <!-- <el-option label="待审核" value="PENDINGAPPROVAL"></el-option> -->
                        <el-option label="驳回" value="REJECT"></el-option>
                        <el-option label="通过" value="PASS"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="this.addEditFlag == 'examine'" label="备注" prop="remark">
                    <el-input class="w100p" type="textarea" v-model="ruleForm.remark" placeholder="请输入内容"></el-input>
                </el-form-item>
            </div>
            <div v-if="ruleForm.workOrderStatus && ruleForm.workOrderStatus == 'PASS' && addEditFlag == 'examine'">
                <el-form-item label="权限等级" prop="privilegeLevel">
                    <el-input class="w100p" type="number" v-model="ruleForm.privilegeLevel"
                        placeholder="请输入权限等级"></el-input>
                </el-form-item>
                <el-form-item label="权限到期时间" prop="privilegeLevelTime">
                    <el-date-picker class="w100p" v-model="ruleForm.privilegeLevelTime"
                        value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择处理时间">
                    </el-date-picker>
                </el-form-item>
            </div>
            <div class="examineInfo" v-if="addEditFlag == 'lookView' && tableData.length">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="happenTime" label="操作日期">
                    </el-table-column>
                    <el-table-column prop="operationType" label="操作类型">
                    </el-table-column>
                    <el-table-column prop="workOrderStatusStr" label="状态" width="180">
                    </el-table-column>
                </el-table>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>

import workOrderApi from "@/api/workOrder"
import webUser from "@/api/webUser";
export default {
    components: {},
    props: {
        addEditFlag: {
            type: String,
            default: () => {
                return 'add'
            }
        },
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        data: {
            type: Object,
            default: () => {
                return {}
            }
        },
        title: {
            type: String,
            default: () => {
                return '操作表单'
            }
        },
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
    },
    data() {
        return {
            addEditName: '添加',
            addEditApi: workOrderApi.add,
            ruleForm: {},
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'change' }
                ],
                orderCode: [
                    { required: true, message: '请输入工单编号', trigger: 'change' }
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'change' }
                ],
                submitUserId: [
                    { required: true, message: '请选择提交人', trigger: 'change' }
                ],
                submitTime: [
                    { required: true, message: '请选择日期时间', trigger: 'change' }
                ],
                workOrderStatus: [
                    { required: true, message: '请选择工单状态', trigger: 'change' }
                ],
                privilegeLevelTime: [
                    { required: true, message: '请选择日期时间', trigger: 'change' }
                ],
                privilegeLevel: [
                    { required: true, message: '请输入权限等级', trigger: 'change' }
                ],
            }
        }
    },
    watch: {
        dialogVisible(v) {
            v && this.initData()
        }
    },
    computed: {},
    mounted() {
    },
    methods: {
        initData() {
            if (this.addEditFlag == 'add') {
                this.ruleForm = {
                    updates: false,
                    appType: 'ANDROID'
                }
                this.addEditApi = workOrderApi.add
                this.addEditName = '添加'
            } else if (this.addEditFlag == 'edit' || this.addEditFlag == 'examine') {
                let userInfo = this.data.submitUser || {}
                this.ruleForm = {
                    ...this.data,
                    workOrderStatus: this.addEditFlag == 'examine' && this.data.workOrderStatus == 'PENDINGAPPROVAL' ? '' : this.data.workOrderStatus,
                    privilegeLevelTime: userInfo.privilegeLevelTime,
                    privilegeLevel: userInfo.privilegeLevel
                };
                this.addEditApi = this.addEditFlag == 'examine' ? workOrderApi.examine : workOrderApi.edit;
                this.addEditName = this.addEditFlag == 'examine' ? '审核' : '编辑';
            } else if (this.addEditFlag == 'lookView') {
                this.ruleForm = {
                    ...this.data,
                    userId: sessionStorage.userId,
                };
                this.addEditName = '查看';
            }
        },
        //提交表单
        submitForm() {
            let that = this
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.addEditApi({ ...this.ruleForm }).then(res => {
                        // 审核状态修改后修改用户信息
                        if (this.addEditFlag == 'examine') {
                            let userInfo = this.data.submitUser || {}
                            let params = {
                                ...userInfo,
                                privilegeLevelTime: this.ruleForm.privilegeLevelTime,
                                privilegeLevel: this.ruleForm.privilegeLevel,
                            };
                            webUser.edit(params).then(res => {
                                console.log(res.code)
                                if (res.code == 1) {
                                    this.$emit("closeDialog");
                                    that.$message.success('修改成功')
                                } else {
                                    that.$message.warning('修改用户信息失败')
                                }
                            }).catch(err => {
                                console.log(err)
                                that.$message.warning('操作失败')
                            });
                        } else {
                            this.$message[res.code == 1 ? 'success' : 'warning'](res.msg)
                            this.cancel();
                        }
                    }).catch(err => {
                        this.$message.warning('操作失败')
                    })
                } else {
                    return false;
                }
            })
        },
        //取消关闭
        cancel() {
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {  this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.line {
    border-bottom: 1px solid #e6e6e6;
}

.icon {
    font-size: 20px;
    line-height: 29px;
    cursor: pointer;
}

::v-deep .noLabel {
    .el-form-item {
        .label {
            display: none;
        }

        .el-form-item__content {
            margin: 0;
        }
    }
}
</style>